<template>
	<view class="invite-friend-bg">
		<view class="invite-friend-box">
			<view class="invite-friend-logo"><image src="http://static.kuaimayoupin.com/761480521711644.png" mode="aspectFit"></image></view>
		</view>
		<view class="invite-friend-bot">
			<view class="invite-friend-info">
				最近
				<text>火爆朋友圈</text>
				的交友软件 你还不知道就out啦,
				<text>赶紧进来看看</text>
				吧~
			</view>
			<view class="invitation-card">
				<view class="invitation-name">{{invite_user.nick_name}}，邀您领取</view>
				<view class="experience-card">
					<view class="experience-card-hint">已有{{suijishu}}人领取成功</view>
					<!-- <view class="experience-btn" @click="acceptInvite"></view> -->
						<button class='experience-btn' open-type='getPhoneNumber'  @getphonenumber="decryptPhoneNumber">立即领取</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getInviteInfo} from '@/api/user/user.js'
export default {
	data() {
		return {
			invite_no:null,
			invite_user:{},
			sessionKey:null,
			openid:null,
			ivdata:null,
			encryptedData:null,
			suijishu : '',
		}
	},
	onLoad: function(e) {
		this.getSuiJi();
		this.invite_no = e.invite_no
		getInviteInfo(this.invite_no).then(res=>{
			this.invite_user=res.data
		})
		this.getWxCode();
	},
	methods: {
		getSuiJi(){
			this.suijishu = Math.floor(Math.random() * (10000 - 999999) + 999999);
			console.log(this.suijishu)
		},
		getWxCode() {
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.wxLogin(loginRes.code);
				},
				fail: err => {
					console.log('err', err);
				}
			});
		},
		wxLogin(code) {
			let that = this;
			this.$request
				.post({
					url: 'user/setWXCode',
					data: {
						code: code
					}
				})
				.then(response => {
					const data = response.data;
					this.sessionKey = data.session_key;
					this.openid = data.openid;
					const USER = {
						sessionKey: data.session_key,
						openid: data.openid
					};
				});
		},
		decryptPhoneNumber(e){
			console.log(e);
			this.encrypdata = e.detail.encryptedData;
			this.ivdata = e.detail.iv;
			this.$request
				.post({
					url: 'user/wxlogin',
					data: {
						encryptedData: this.encrypdata,
						iv: this.ivdata,
						sessionKey: this.sessionKey,
						openid: this.openid,
						invite_user:this.invite_user
					}
				})
				.then(res => {
					const data = res.data;
					uni.setStorageSync('userInfo', data);
					try {
						uni.setStorageSync('token', data.token);
						this.$emit('uploadUser');
					} catch (e) {
						// error
					}
				});
		}
	}
};
</script>

<style lang="scss">
.invite-friend-bg{
	height: 100vh;
	background: linear-gradient(180deg, rgba(164, 30, 51, 1) 0%, rgba(199, 31, 46, 1) 100%);
}
.invite-friend-box {
	background: url(http://static.kuaimayoupin.com/5801934394464334.png) no-repeat;
	width: 750upx;
	height: 528upx;
	background-size: 100% 100%;
	padding-top: 180upx;
	box-sizing: border-box;
	.invite-friend-logo {
		image {
			display: block;
			width: 148upx;
			height: 144upx;
			margin: auto;
		}
	}
}
.invite-friend-bot {
	
	.invite-friend-info {
		color: #ecc990;
		width: 560upx;
		line-height: 60upx;
		font-size: 32upx;
		margin: auto;
		text-align: center;
		margin-bottom: 40upx;
		text {
			font-size: 36upx;
		}
	}
}
.invitation-card {
	width: 690upx;
	height: 540upx;
	background: #b6394a;
	border-radius: 12px;
	margin: auto;
	.invitation-name {
		color: #fff;
		font-size: 36upx;
		ne-height: 48upx;
		padding: 30upx 60upx 0;
	}
	.experience-card {
		width: 690upx;
		height: 448upx;
		margin: auto;
		background: url(http://static.kuaimayoupin.com/5346399970398339.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		.experience-btn {
			position: absolute;
			bottom: 90upx;
			left: 0;
			right: 0;
			margin: auto;
			width: 274upx;
			line-height: 68upx;
			background: linear-gradient(180deg, rgba(247, 239, 130, 1) 0%, rgba(251, 192, 61, 1) 100%, rgba(252, 235, 137, 1) 100%);
			border-radius: 17px;
			color:rgba(211,43,68,1);
			text-align: center;
		}
		.experience-card-hint{
			color:rgba(255,255,255,1);
			text-align: center;
			position: absolute;
			bottom: 180upx;
			left: 0;
			right: 0;
			margin: auto;
			
			color:rgba(255,255,255,.6);
		}
	}
}
</style>
